<template>
  <div class="app-content">
    <!-- app数据管理 内容分析 -->
    <el-row
      type="flex"
      justify="start">
      <el-date-picker
        v-model="searchParams.startTime"
        type="date"
        :editable="false"
        placeholder="开始日期"
        :picker-options="pickerOption0"
        format="yyyy-M-dd"
        value-format="yyyy-M-dd"
      />
      <span style="line-height: 36px;">~</span>
      <el-date-picker
        v-model="searchParams.endTime"
        type="date"
        :editable="false"
        placeholder="结束日期"
        format="yyyy-M-dd"
        value-format="yyyy-M-dd"
        :picker-options="pickerOption1"
      />
      <el-button
        type="primary"
        @click="handleSearch">
        搜索
      </el-button>
    </el-row>
    <content>
      <el-row :gutter="40">
        <el-col :span="12">
          <CommonTable
            ref="keyWord"
            :table-head="[ '搜索关键词', '搜索次数' ]"
            :search-params="searchParams"
            :set-total="setTotal"
            url="/midea/menu/analyse/hotandcounts"
            title="关键词搜索统计："
          />
        </el-col>
        <el-col :span="12">
          <CommonTable
            ref="collect"
            :table-head="[ '菜谱收藏', '收藏量' ]"
            :search-params="searchParams"
            :set-total="setTotal"
            url="/midea/menu/analyse/menuandrecommendcounts"
            title="菜谱收藏统计："
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <CommonTable
            ref="hot"
            :table-head="[ '热门菜谱', '浏览量' ]"
            :search-params="searchParams"
            :set-total="setTotal"
            url="/midea/menu/analyse/hotestmenucounts"
            title="最热菜谱统计："
          />
        </el-col>
      </el-row>
    </content>
  </div>
</template>

<script>
import CommonTable from '../components/CommonTable'

export default {
  components: { CommonTable },
  data () {
    return {
      /* tableData: [],
      tableHead: [
        {
          prop: '0',
          label: '搜索关键词'
        },
        {
          prop: '1',
          label: '搜索次数'
        }
      ], */
      // 搜索条件
      searchParams: {
        dayweekmonth: 0,
        endTime: '2019-08-20',
        startTime: '2018-07-20'
      },
      /* // 分页
      tablePage: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      }, */
      loading: true,
      showMore: false,
      // 校验开始日期不能大于结束日期
      pickerOption0: {
        disabledDate: (time) => {
          if (this.searchParams.endTime !== '') {
            return time.getTime() > this.searchParams.endTime
          } else {
            return false
          }
        }
      },
      pickerOption1: {
        disabledDate: (time) => {
          if (this.searchParams.startTime !== '') {
            return time.getTime() < this.searchParams.startTime
          } else {
            return false
          }
        }
      }
    }
  },
  mounted () {
    // this.init()
  },
  methods: {
    init () {
      const params = {
        currentPage: 1,
        dayweekmonth: 0,
        endTime: '',
        pageSize: 5,
        startTime: ''
      }
      window.axios.post('/api/midea/menu/analyse/hotandcounts', params)
        .then(res => {
          console.log('%c-----log-----', 'background:gold;color:skyblue;padding:0 50px;', res)
          this.tableData = res.data
          this.tablePage.total = res.data[0] ? res.data[0][2] : ''
          this.loading = false
        })
    },
    handleSearch () {
      this.$refs.keyWord.handleSearch()
      this.$refs.hot.handleSearch()
      this.$refs.collect.handleSearch()
      /* this.tableData = []
      this.tablePage.total = 0
      this.tablePage.currentPage = 1
      this.loading = true
      const params = Object.assign({
        currentPage: 1,
        pageSize: this.tablePage.pageSize
      }, this.searchParams)
      window.axios.post('/api/midea/menu/analyse/hotandcounts', params).then((res) => {
        this.loading = false
        this.tableData = res.data
        this.tablePage.total = res.data[0] ? res.data[0][2] : ''
      }).catch(() => {
        this.loading = false
      }) */
    },
    setTotal (res, tar) {
      tar.tablePage.total = res.data[0] ? res.data[0][2] : 0
    }
    /* // 分页组件控制
    handleSizeChange (val) {
      this.tablePage.pageSize = val
      // // 避免直接传currentPage导致多次请求
      // if (this.tablePage.currentPage === 1) {
      //   this.handleSearch()
      // } else {
      //   // size-change中改变currentPage会自动触发current-change
      //   this.tablePage.currentPage = 1
      // }
      this.handleSearch()
    },
    handleCurrentChange (val) {
      this.tablePage.currentPage = val
      this.handleSearch()
    } */
  }
}
</script>

<style lang="scss">
.app-content {
  content {
    p {
      line-height: 2;
      font-weight: bold;
      font-size: 20px;
      span {
        float: right;
        color: blue;
      }
    }
  }
}
</style>
